<md-tabs md-dynamic-height md-stretch-tabs="always" md-border-bottom>
    <md-tab label="Properties" >
        <md-content layout-padding>
            <md-input-container class="md-block" flex-gt-xs>
                <label>Name</label>
                <input ng-model="$ctrl.router.name" name="name" type="text" ng-pattern="validate_name" md-maxlength="255">
                <div ng-messages="$ctrl.formReference.name.$error" role="alert" multiple>
                    <div ng-message="pattern" class="my-message">That doesn't look like a valid network name.</div>
                    <div ng-message="md-maxlength" class="my-message">Too long network name.</div>
                </div>
            </md-input-container>

            <md-input-container class="md-block" flex-gt-xs>
                <label>External Network</label>
                <md-select ng-model="$ctrl.router.external_gateway_info.network" ng-disabled="$ctrl.disable.network">
                    <md-option ng-repeat="nw in update.networks" ng-value="nw.id">
                        {$ nw.name $}
                    </md-option>
                </md-select>
            </md-input-container>

            <label>External Fixed IP Addresses</label>
            <md-button ng-click="$ctrl.add_external_fixed_ip()" aria-label="Add" class="md-icon-button"><i class="fa fa-fw fa-plus"></i></md-button>

            <div ng-repeat="fixed_ip in $ctrl.router.external_gateway_info.external_fixed_ips" ng-class-odd="'odd'" ng-class-even="'even'">
                <div layout-gt-xs="row" >
                    <md-input-container class="md-block" flex-gt-xs="50">
                        <label>IP Address</label>
                        <input ng-model="fixed_ip.ip_address" name="fixed_ip_{$ $index $}" type="text" ng-pattern="validate_ip_address" />
                        <div ng-messages="$ctrl.formReference['fixed_ip_'+$index].$error" role="alert" multiple>
                            <div ng-message="pattern" class="my-message">That doesn't look like a valid ip address.</div>
                        </div>
                    </md-input-container>
                    <md-input-container class="md-block" flex-gt-xs="50">
                        <label>Subnet</label>
                        <md-select ng-model="fixed_ip.subnet" ng-disabled="$ctrl.disable.subnets.indexOf(fixed_ip.subnet) > -1">
                            <md-option ng-repeat="subnet in update.subnets" ng-value="subnet.id" ng-disabled="$ctrl.disable.subnets.indexOf(subnet.id) > -1">
                                {$ subnet.name $}
                            </md-option>
                        </md-select>
                    </md-input-container>
                    <md-button ng-click="$ctrl.delete_external_fixed_ip($index)" aria-label="Delete" class="md-icon-button"><i class="fa fa-fw fa-times"></i></md-button>
                </div>
            </div>


            <div layout-gt-xs="row" >
                <md-input-container class="md-block" flex-gt-xs>
                    <md-checkbox ng-model="$ctrl.router.admin_state_up" aria-label="admin_state_up">
                      Admin State UP
                    </md-checkbox>
                </md-input-container>
                <md-input-container class="md-block" flex-gt-xs>
                    <md-checkbox ng-model="$ctrl.router.external_gateway_info.enable_snat" aria-label="enable_snat">
                      Enable SNAT
                    </md-checkbox>
                </md-input-container>
            </div>

            <md-switch class="md-primary" name="show_more" ng-model="show_more">
              {$ 'Show More Properties' | translate $}
            </md-switch>

        </md-content>
    </md-tab>
    <md-tab label="More Properties" ng-if="show_more">
        <md-content layout-padding>

            <div layout-gt-xs="row" >
                <md-input-container class="md-block" flex-gt-xs>
                    <md-checkbox ng-model="$ctrl.router.distributed" aria-label="distributed">
                      Distributed
                    </md-checkbox>
                </md-input-container>

                <md-input-container class="md-block" flex-gt-xs>
                    <md-checkbox ng-model="$ctrl.router.ha" aria-label="ha">
                      HA
                    </md-checkbox>
                </md-input-container>
            </div>

            <md-input-container class="md-block" flex-gt-xs>
                <label>L3 Agents</label>
                <md-chips ng-model="$ctrl.router.l3_agent_ids"
                          placeholder="+ l3 agent id"
                          readonly="false"
                          md-removeable="true"
                          md-max-chips="255">
                </md-chips>
            </md-input-container>

            <md-input-container class="md-block" flex-gt-xs>
                <label>Tags</label>
                <md-chips ng-model="$ctrl.router.tags"
                          placeholder="+ tags"
                          readonly="false"
                          md-removeable="true"
                          md-max-chips="255">
                </md-chips>
            </md-input-container>

            <label>Value Specs</label>
            <md-button ng-click="$ctrl.add_value_specs()" aria-label="Add" class="md-icon-button"><i class="fa fa-fw fa-plus"></i></md-button>
            <div ng-repeat="record in $ctrl.router.value_specs" ng-class-odd="'odd'" ng-class-even="'even'">
                <div layout-gt-xs="row" >
                    <md-input-container class="md-block" flex-gt-xs>
                        <label>Key</label>
                        <input ng-model="record.key" type="text">
                    </md-input-container>
                    <md-input-container class="md-block" flex-gt-xs>
                        <label>Value</label>
                        <input ng-model="record.value" type="text">
                    </md-input-container>
                    <md-button ng-click="$ctrl.delete_value_specs($index)" aria-label="Delete" class="md-icon-button"><i class="fa fa-fw fa-times"></i></md-button>
                </div>
            </div>
        </md-content>
    </md-tab>

    <md-tab label="Depends on">
        <md-content layout-padding>
            <depends-on dependson='dependson'></depends-on>
        </md-content>
    </md-tab>
</md-tabs>